<template>
	<NavBar :obj="{ title: '店铺用户', color: '#000', backgroundColor: '#fff' }" />

	<view class="fill">
		<view class="show-load" v-if="showLoad" style="padding: 30upx">
			<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
		</view>

		<view class="infos flex items-center justify-between" v-for="(item, index) in list" :key="index">
			<view class="photo">
				<image :src="imgUrl + item.photo"></image>
			</view>
			<view class="composite flex-1">
				<view class="nickname-top flex items-center">
					<view class="nickname line-1-clamp" style="max-width: 50%">{{ item.nickname }}</view>
				</view>
				<view class="bottom flex items-center">
					<view class="item flex items-center">
						<text>{{ item.mobile }}</text>
					</view>
					<view class="item">
						<text>ID：{{ item.code }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="empty" style="padding-bottom: 20%" v-if="!list.length && !showLoad">
			<up-empty icon="/static/product/ic_zerodata@2x.png" iconSize="392rpx" marginTop="50%" text="暂无" />
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { port, goUrl, hint, imgUrl } from '/service/port';
	import { onShow, onReachBottom } from '@dcloudio/uni-app';

	const list = ref([]);
	const page = ref(1);
	const showLoad = ref(true);
	async function getShopUser() {
		showLoad.value = true;
		let res = await port('getShopUser', { page: page.value });
		showLoad.value = false;
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			page.value++;
		}
	}

	onShow(() => {
		page.value = 1;
		list.value.length = 0;
		getShopUser();
	});

	onReachBottom(() => {
		getShopUser();
	});
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #fff;
	}

	.fill {
		.infos {
			background: #ffffff;
			border-radius: 16rpx;
			padding: 24rpx;
			border-bottom: 1rpx solid #eee;
			&:last-child {
				border-bottom: none;
			}
			.add-btn {
				font-weight: 400;
				font-size: 28rpx;
				color: #f81a2e;
				border-radius: 16rpx;
				border: 1px solid #f81a2e;
				padding: 8rpx 20rpx;
			}

			.del {
				color: #666666;
				border: 1px solid #cccccc;
			}

			.photo {
				background: #ffffff;
				// box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(228, 47, 4, 0.26);
				border-radius: 50%;
				border: 5rpx solid #ffffff;
				width: 94rpx;
				height: 94rpx;
				> image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.composite {
				margin-left: 22rpx;
				.nickname-top {
					.nickname {
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
					}
				}

				.bottom {
					margin-top: 15rpx;
					gap: 35rpx;
					.item {
						> text {
							font-weight: 400;
							font-size: 22rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}
</style>
